<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="昵称名称" prop="zhName">
        <el-input
          v-model="queryParams.zhName"
          placeholder="请输入昵称名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="账户余额" prop="zhMoney">
        <el-input
          v-model="queryParams.zhMoney"
          placeholder="请输入账户余额"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="可用余额" prop="zhKeyongmoney">
        <el-input
          v-model="queryParams.zhKeyongmoney"
          placeholder="请输入可用余额"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="代收金额" prop="zhDaishou">
        <el-input
          v-model="queryParams.zhDaishou"
          placeholder="请输入代收金额"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="冻结金额" prop="zhDongjie">
        <el-input
          v-model="queryParams.zhDongjie"
          placeholder="请输入冻结金额"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="zhStime">
        <el-date-picker clearable
                        v-model="queryParams.zhStime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="primary"-->
      <!--          plain-->
      <!--          icon="el-icon-plus"-->
      <!--          size="mini"-->
      <!--          @click="handleAdd"-->
      <!--          v-hasPermi="['caiwu:zhanghu:add']"-->
      <!--        >新增</el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['caiwu:zhanghu:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['caiwu:zhanghu:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['caiwu:zhanghu:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="zhanghuList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="支付ID" align="center" prop="zhId" />
      <!--      <el-table-column label="昵称名称" align="center" prop="zhName"/>-->
      <el-table-column label="昵称名称" align="center" width="280">
        <template slot-scope="scope">
          <div class="yhRole">
            <div class="box1" v-if="scope.row.zhRole==='用户'" style="background-color: #A6B9EF">
              {{scope.row.zhRole}}
            </div>
            <div class="box1" v-else-if="scope.row.zhRole==='站点'" style="background-color: #36CA41">
              {{scope.row.zhRole}}
            </div>
            <div class="box2">
              <p style="color: black;margin: 0;padding: 0">{{ scope.row.zhName }}</p>
              <p style="color: #bbbbbb;margin: 0;padding: 0">+86{{ scope.row.yhId }}</p>
            </div>
          </div>
          <!--          <div style="color:"></div>-->
        </template>
      </el-table-column>
      <el-table-column label="账户余额" align="center" prop="zhMoney" />
      <el-table-column label="可用余额" align="center" prop="zhKeyongmoney" />
      <el-table-column label="代收金额" align="center" prop="zhDaishou" />
      <el-table-column label="冻结金额" align="center" prop="zhDongjie" />
      <el-table-column label="创建时间" align="center" prop="zhStime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.zhStime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="zhZhuangtai" />
      <!--      <el-table-column label="操作" align="center"/>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">

        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['caiwu:zhanghu:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['caiwu:zhanghu:remove']"
          >删除</el-button>
          <el-button
            v-if="scope.row.zhZhuangtai==='已禁用'"
            size="mini"
            type="text"
            @click="JieDongDate(scope.row)">
            解冻账号
          </el-button>
          <el-button
            v-else
            size="mini"
            type="text"
            @click="DongJieDate(scope.row)">
            冻结账户
          </el-button>
          <!--      确定解冻账户-->
          <el-dialog
            title="确定解冻该账户？"
            :visible.sync="dialogVisible"
            width="30%"
          >
            <span>用户账户被解冻后将恢复提现、充值，请慎重操作！</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="JieDongClick">确 定</el-button>
            </span>
          </el-dialog>

          <!--      确定冻结账户-->
          <el-dialog
            title="确定冻结该账户？"
            :visible.sync="dialogVisible1"
            width="30%"
          >
            <p>用户账户被冻结后将无法提现、充值，请慎重操作！</p>
            <p>冻结原因:
              <el-select v-model="value" clearable placeholder="请选择原因">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select></p>

            <p>
              补充说明:<el-input
              type="textarea"
              :rows="4"
              placeholder="请输入补充说明"
              v-model="textarea1">
            </el-input>
            </p>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="DongJieClick">确 定</el-button>
            </span>
          </el-dialog>
        </template>


      </el-table-column>
    </el-table>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改账户对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="昵称名称" prop="zhName" >
          <el-input v-model="form.zhName" placeholder="请输入昵称名称" disabled/>
        </el-form-item>
        <el-form-item label="账户余额" prop="zhMoney">
          <el-input v-model="form.zhMoney" placeholder="请输入账户余额" />
        </el-form-item>
        <el-form-item label="可用余额" prop="zhKeyongmoney">
          <el-input v-model="form.zhKeyongmoney" placeholder="请输入可用余额" />
        </el-form-item>
        <el-form-item label="代收金额" prop="zhDaishou">
          <el-input v-model="form.zhDaishou" placeholder="请输入代收金额" />
        </el-form-item>
        <el-form-item label="冻结金额" prop="zhDongjie">
          <el-input v-model="form.zhDongjie" placeholder="请输入冻结金额" />
        </el-form-item>
        <el-form-item label="创建时间" prop="zhStime">
          <el-date-picker clearable
                          v-model="form.zhStime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择创建时间" disabled>
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listZhanghu, getZhanghu, delZhanghu, addZhanghu, updateZhanghu } from "@/api/caiwu/zhanghu";
import {listYonghu} from "@/api/system/yonghu";
import {listPeisongzhan} from "@/api/system/peisongzhan";

export default {
  name: "Zhanghu",
  data() {
    return {
      //冻结原因
      options: [{
        value: '选项1',
        label: '操作违规'
      }, {
        value: '选项2',
        label: '账户异常'
      }, {
        value: '选项3',
        label: '原因一'
      }, {
        value: '选项4',
        label: '原因二'
      }],
      value: '',
      textarea1:'',
      //确定冻结
      dialogVisible: false,
      dongjieDate:null,
      //确定解冻
      dialogVisible1:false,
      jiedongDate:null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 账户表格数据
      zhanghuList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        zhName: null,
        zhMoney: null,
        zhKeyongmoney: null,
        zhDaishou: null,
        zhDongjie: null,
        zhStime: null,
        zhZhuangtai: null,
        zhRole:null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        zhName: [
          { required: true, message: "昵称名称不能为空", trigger: "blur" }
        ],
        zhMoney: [
          { required: true, message: "账户余额不能为空", trigger: "blur" }
        ],
        zhKeyongmoney: [
          { required: true, message: "可用余额不能为空", trigger: "blur" }
        ],
        zhDaishou: [
          { required: true, message: "代收金额不能为空", trigger: "blur" }
        ],
        zhDongjie: [
          { required: true, message: "冻结金额不能为空", trigger: "blur" }
        ],
        zhZhuangtai: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.addList();
  },
  methods: {

    addList() {
      this.loading = true;
      let userAll =[];
      let peisongzhanAll =[];
      let zhanghuAll = [];
      // 新增用户信息
      listYonghu(this.queryParams).then(response => {
        userAll = response.rows;
        console.log(userAll);
        // if(response.rows[0].budName!=="1号楼"){
        //   addZhanghu({
        //     zhName: response.rows[0].budName,
        //   }).then(response => {
        //     console.log(response.rows);
        //   });
        // }

        // this.zhanghuList = response.rows;
        // this.total = response.total;
        // this.loading = false;
      });
      //新增配送站信息
      listPeisongzhan(this.queryParams).then(response =>{
        peisongzhanAll = response.rows;
        console.log(peisongzhanAll);
      });

      listZhanghu(this.queryParams).then(response => {
        zhanghuAll = response.rows;
        //用户
        console.log(zhanghuAll);
        userAll.forEach(item1 => {
          let isUser = true;
          console.log(item1.yhName);
          zhanghuAll.forEach(item2=>{
            if(item1.yhName ===item2.zhName){
              isUser = false;
            }
            // console.log(item2);
          });
          if(isUser){
            addZhanghu({
              zhId: item1.yhId,
              zhName: item1.yhName,
              yhId: item1.yhPhone,
              zhStime: item1.yhTjsj,
              zhRole: "用户",
            }).then(response => {
              console.log(response.rows);
            });
          }
        });
        //配送站
        peisongzhanAll.forEach(item1 => {
          let isZhanDian = true;
          console.log(item1.pszName);
          zhanghuAll.forEach(item2=>{
            if(item1.pszName ===item2.zhName){
              isZhanDian = false;
            }
            // console.log(item2);
          });
          if(isZhanDian){
            addZhanghu({
              // zhId: item1.pszId,
              zhName: item1.pszName,
              yhId: item1.pszPhone,
              zhStime: item1.pszJianzhantime,
              zhRole: "站点",
            }).then(response => {
              console.log(response.rows);
            });
          }
        });
        this.getList();
      });
    },
    /** 查询账户列表 */
    getList() {
      this.loading = true;
      listZhanghu(this.queryParams).then(response => {
        this.zhanghuList = response.rows;
        this.total = response.total;
        this.panduan();
        this.loading = false;

      });
    },
    panduan(){
      for (let i= 0;i<this.zhanghuList.length;i++){
        switch (this.zhanghuList[i].zhZhuangtai){
          case "0":
            this.zhanghuList[i].zhZhuangtai="正常"
            break;
          case "1":
            this.zhanghuList[i].zhZhuangtai="已禁用"
            break;
        }
      }

    },
    JieDongDate(obj){
      this.jiedongDate=obj.zhId;
      this.dialogVisible = true
    },
    DongJieDate(obj){
      this.dongjieDate=obj.zhId;
      this.dialogVisible1 = true
    },
    DongJieClick(){
      console.log(111111111)
      updateZhanghu({zhId: this.dongjieDate,
        zhZhuangtai:1})
        .then(response=>{
          this.getList();
        });
      this.dialogVisible1 = false
    },
    JieDongClick(){
      updateZhanghu({zhId: this.jiedongDate,
        zhZhuangtai:0})
        .then(response=>{
          this.getList();
        });
      this.dialogVisible = false
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        zhId: null,
        zhName: null,
        zhMoney: null,
        zhKeyongmoney: null,
        zhDaishou: null,
        zhDongjie: null,
        zhStime: null,
        zhZhuangtai: null,
        zhCaozuo: null,
        yhId: null,
        dpId: null,
        psyId: null,
        pszId: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.zhId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加账户";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const zhId = row.zhId || this.ids
      getZhanghu(zhId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改账户";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.zhId != null) {
            updateZhanghu(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addZhanghu(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const zhIds = row.zhId || this.ids;
      this.$modal.confirm('是否确认删除账户编号为"' + zhIds + '"的数据项？').then(function() {
        return delZhanghu(zhIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('caiwu/zhanghu/export', {
        ...this.queryParams
      }, `zhanghu_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style>
.yhRole{
  display: flex;
}
.box1{
  height: 20px;
  width: 35px;
  line-height: 20px;
  margin-top: 10px;
  border-radius: 5px;
  color: white;
}
.box2{
  margin-left: 10px;
  text-align: left;
  /*display: flex;*/
}
.el-dialog__body {
  text-align: left !important;
}
</style>
